<template>
  <el-pagination
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script setup>
import {watch} from "vue";

const props = defineProps({
  pageInfo: {
    type: Object,
    required: true,
    default: () => ({
      currentPage: 1,
      pageSize:  10,
    }),
  },
  totalCount: {
    type: Number,
    default: 0,
  }
})

const emit = defineEmits(['update:pageInfo'])

watch(() => [props.pageInfo,props.totalCount], ([newPageInfo, newTotalCount]) => {
  // console.log('PageInfo changed:', newPageInfo);
}, { deep: true });

// 翻页相关的具体逻辑
const handleSizeChange = () => {
  emit('update:pageInfo', props.pageInfo);
}

const handleCurrentChange = () => {
  emit('update:pageInfo', props.pageInfo);
}

</script>

<style scoped lang="less">

</style>